<template>
  <div>
    <!-- Header区域 -->
    <Header class="header" title="购物车案例" />
            <p>{{fullState}}</p>
            <p>123-{{amt}}</p>
    <Goods
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :title="item.goods_name"
      :pic="item.goods_img"
      :price="item.goods_price"
      :state="item.goods_state"
      @countChange="getChange"
    />
    <!-- <Footer class="footer" /> -->

  </div>
</template>

<script>
//导入axios
import axios from "axios";
import Header from "./components/Header/Header.vue";
import Goods from "./components/Goods/Goods.vue";
import Footer from "./components/Footer/Footer.vue";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    console.log("create的值来了" + this.list);
  },
  components: {
    Header,
    Goods,
    Footer,
  },
  //全选计算属性
  computed:{
    //动态计算出全选的状态是true还是false
    fullState() {
     return this.list.every(item => item.goods_state)
    },
    //价格
    amt() {
      // 1.先过滤再加
      this.list.filter(item => item.goods_state).reduce((total,item) =>{
        return total += item.goods_price * item.goods_count
      })
    }
  },
  methods: {
    //封装请求数据的方法
    async initCarList() {
      //调用axios的get方法，请求列表数据
      const { data: res } = await axios.get("https://www.escook.cn/api/cart");
      console.log(res);
      //  this.list = res.list
      if (res.status === 200) {
        this.list = res.list;
      }
      // console.log(this.list);
    },
    //接收子组件传来的数据
    getChange(val) {
      console.log(val);
      this.list.some((item) => {
        if (item === val.id) {
          item.goods_state = val.value;
          return true;
        }
      });
    },
  },
  created() {
    //调用请求数据的方法
    this.initCarList();
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.footer {
  position: absolute;
  bottom: 0;
}
</style>